<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        <%- news_result.title %>
    </title>
    <%- include bootstrap %>
</head>

<body>
    <%- include("header",{title:"commemts"}) %>

    <div class="comments_content">
        <div class="container container-fluid">
            <div class="row">
                <div class="col-sm-10 col-xs-10 col-sm-offset-1 col-xs-offset-1">
                    <article>
                        <span class="h2">话题：</span>
                        <span class="h2 title">
                            <%- news_result.title %>
                        </span>
                        <div class="original clearfix"><a class="pull-right" href="/details?db_name=<%- db_name %>&_id=<%- _id %>">查看原文</a></div>
                        <% if(session_username){ %>
                        <textarea class="col-sm-12 col-xs-12 write_comment" placeholder="" style="margin-top: 15px;height: 100px;"
                            id="comments"></textarea>
                        <button class="btn btn-primary pull-right" style="margin-top: 15px;" onclick="submit_commtent('<%- _id %>','<%- db_name %>')">发表</button>
                        <% }else{ %>
                        <textarea class="col-sm-12 col-xs-12 write_comment" placeholder="登录后发表态度" style="margin-top: 15px;height: 50px;"
                            readonly></textarea>
                        <%}%>
                    </article>
                </div>
            </div>
            <div class="row" style="margin-top: 50px;">
                <div class="col-sm-10 col-xs-10 col-sm-offset-1 col-xs-offset-1">
                    <ul class="list-group col-sm-12 col-xs-12" style="padding-right: 0;">
                        <% if(comments_result.length !== 0){ %>
                        <% comments_result.map((item)=>{ %>
                        <li class="list-group-item list-group-item-success">
                            <div>
                                <span class="text-danger h4">
                                    评论人：
                                    <%- item.username %>
                                </span>
                            </div>
                            <div style="margin-top: 10px;font-size: 16px;">
                                <h4>评论内容：</h4>
                                <div class="text-warning"><%- item.content %></div>
                            </div>
                            <div><span class="text-info">
                                    评论时间：
                                    <%- item.insert_time %>
                                </span>
                            </div>
                        </li>
                        <% }); %>
                        <li class="list-group-item list-group-item-info">
                            <nav aria-label="Page navigation" class="cl" style="text-align: center">
                                <div style="display: inline-block">
                                    <ul class="pagination">
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=<%- pageNo>1 ? pageNo-1:1 %>"
                                                aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <%    if(pageNo===(totalPage-1)&&totalPage>=5){   %>
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=<%- totalPage-4 %>">
                                                <%- totalPage-4 %>
                                            </a>
                                        </li>
                                        <%    }   %>
                                        <%    if(pageNo===totalPage&&totalPage>=5){   %>
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=<%- totalPage-4 %>">
                                                <%- totalPage-4 %>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=<%- totalPage-3 %>">
                                                <%- totalPage-3 %>
                                            </a>
                                        </li>
                                        <%    }   %>
                                        <%    if(pageNo===totalPage&&totalPage===4){   %>
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=<%- totalPage-3 %>">
                                                <%- totalPage-3 %>
                                            </a>
                                        </li>
                                        <%    }   %>
                                        <%    if(pageNo>2){   %>
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=<%- pageNo -2 %>">
                                                <%- pageNo-2 %>
                                            </a>
                                        </li>
                                        <%    }   %>
                                        <%    if(pageNo>1){   %>
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=<%- pageNo-1 %>">
                                                <%- pageNo-1 %>
                                            </a>
                                        </li>
                                        <%    }   %>
                                        <li class="active">
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=<%- pageNo %>">
                                                <%- pageNo %>
                                            </a>
                                        </li>
                                        <%    if(pageNo<=totalPage-1){   %>
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=<%- pageNo+1 %>">
                                                <%- pageNo+1 %>
                                            </a>
                                        </li>
                                        <%    }   %>
                                        <%    if(pageNo<=totalPage-2){   %>
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=<%- pageNo+2 %>">
                                                <%- pageNo +2  %>
                                            </a>
                                        </li>
                                        <%    }   %>
                                        <%    if(pageNo===1&&totalPage===4){   %>
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=4">
                                                4
                                            </a>
                                        </li>
                                        <%    }   %>
                                        <%    if(pageNo===1&&totalPage>=5){   %>
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=4">
                                                4
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=5">
                                                5
                                            </a>
                                        </li>
                                        <%    }   %>
                                        <%    if(pageNo===2&&totalPage>=5){   %>
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=5">
                                                5
                                            </a>
                                        </li>
                                        <%    }   %>
                                        <li>
                                            <a href="/comments/comments/?db_name=<%- db_name %>&_id=<%- _id %>&pageNo=<%- pageNo<totalPage ? pageNo+1:totalPage %>"
                                                aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                        </li>
                        <li class="list-group-item list-group-item-info">
                            <p class="h4 text-danger">
                                第
                                <%- pageNo %> 页 / 共
                                <%- totalPage%> 页
                                总
                                <%- count %> 条
                            </p>
                        </li>
                        <% }else{ %>
                        <li class="list-group-item list-group-item-danger h3">
                            暂无评论
                        </li>
                        <% } %>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <%- include("footer") %>
</body>

<script>
    function submit_commtent(_id, db_name) {
        var content = $(".write_comment").val();
        var title = $(".title").html();
        setCookie("news_content",content);
        setCookie("news_title",title);
        location.href = `/comments/submit?_id=${_id}&db_name=${db_name}`;
    }

    // $("#content").xheditor();  // 富文本编辑框 实例化 
    $(pageInit);
    //  comment.ejs  /comment/index
    function pageInit() {
        $.extend(XHEDITOR.settings, { shortcuts: { "ctrl+enter": submitForm } });
        // $("#ele").xheditor();
        $("#comments").xheditor({   //初始化 富文件编辑框
            html5Upload: false,
            upMultiple: "1",

            upLinkRrl: "upload.html",
            upLinkExt: "zip,rar,txt",

            upImgUrl: "/comments/uploadImg",   // 图片上传的服务器  
            upImgExt: "jpg,jpeg,gif,png",

            upFlashUrl: "upload.php",
            upFlashExt: "swf",

            upMediaUrl: "upload.php",
            upMediaExt: "wmv,avi,wma,mp3,mid"

        });
    };

    function insertUpload(arrMsg) {
        var i, msg;
        for (var i = 0; i < arrMsg.length; i++) {
            msg = arrMsg[i];
            $("#uploadList").append('<option value="' + msg.id + '">' + msg.localname + '</option>')
        }
    };

    function submitForm() {
        $("#frmDemo").submit();
    }
</script>

</html>